<template>
  <div class="new shotbox">
      <div class="new-top title">
        {{ newstype.title }}
      </div>
      <div class="new-bottom">
        <el-row :gutter="20" class="row-height"> 
          <el-col :sm="24" :md="12">
            <el-card class="card" shadow="never" :body-style="{ padding: '5px' }">
              <el-carousel>
                <el-carousel-item v-for="(item,index) in newList" :key="index">
                  <img class="image" :src="url + item.filePath" alt="">
                </el-carousel-item>
              </el-carousel>
              <!-- <img class="image" :src="url + pictureText.filePath" alt=""> -->
            </el-card>
          </el-col>
          <el-col :sm="24" :md="12">
            <div class="new-list">
              <div class="new-list-top">
                <span>{{newstype.label}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="goNewList">查看更多</el-button>
              </div>
              <div class="new-list-bottom">
                <div class="new-box" v-for="(item,index) in newList" :key="index">
                  <div style="cursor: pointer;" @click="goNewDetail(item)">
                    <div class="new-list-bottom-left">
                      <p class="new-text">{{ item.title }}</p>
                    </div>
                    <div class="new-list-bottom-right"> 
                      <i class="el-icon-arrow-right new-icon"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <el-card class="card" shadow="never" :body-style="{ padding: '5px' }">
              <div slot="header" class="clearfix">
                <span>最新动态</span>
                <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
              </div>
              <div class="newlist" v-for="(item,index) in newList" :key="index">
                
                {{ item.discription }}
              </div>
            </el-card> -->
          </el-col>
        </el-row>
      </div>
    </div>
</template>
<script>
import http from '@/utils/baseUrl'
import {getFilterNew,getEightNew} from "@/api/official";
export default {
  props:{
    newstype:Object
  },
  created() {
    this.getNew()
  },
  data () {
    return {
      url: http,
      pictureText:{},
      newList:[],
    }
  },
  methods:{
    goNewList() {
      this.$router.push('/new-list')
    },
    getNew() {
      let aim = this.newstype.type
      if(aim == '培训新闻') {
        getFilterNew(aim).then(res => {
          this.newList = res.data.list
        })
      } else {
        getEightNew().then(res => {
          this.newList = res.data.list
        })
      }
    },
    goNewDetail(item) {
      this.$router.push(`new-detail/${item.id}`)
    }
  }
}
</script>
<style scoped>
.new-box {
  clear: both;
}
.new-text {
  width: 30em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  float: left;
  line-height: 25px;
  border-left: 3px solid #409EFF;
  padding-left: 10px;
  margin-bottom: 5px;
}
.new-list-top {
  border-left: 5px solid #409EFF;
  padding-left: 15px;
  line-height: 30px;
  font-size: 24px;
  font-weight: bold;
  clear:both;
}
.new-list-bottom {
  padding-top: 20px;
}
.new-list-bottom-right {
  float: right;
  height: 25px;
  display: flex;
  align-items: center;
}
.new-list-bottom-right i{
  margin-bottom: 5px;
}
.new  img {
  width: 100%;
  height: 298px;
}
.new .new-bottom .content {
  padding: 0 2%;
  text-indent: 2em;
  font-size: 16px;
  text-align: justify;
  line-height: 26px;
  overflow: hidden;
  height: 214px;
}
.row-height {
  display: flex;
  flex-flow: row wrap;
}
.row-height .card {
  height: 100%;
}
@media screen and (max-width: 768px) {
  .new-text {
    width: 20em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    float: left;
    line-height: 25px;
    border-left: 3px solid #409EFF;
    padding-left: 10px;
    margin-bottom: 5px;
  }
}
</style>